<template>
	<view class="container">
		<!-- 顶部积分区域 -->
		<view class="points-area">
			<view class="points-info">
				<text class="points-title">我的积分</text>
				<view class="points-actions">
					<text class="action-btn"></text>
					<text class="action-btn"></text>
				</view>
			</view>
			<view class="points-number">
				<text class="number">{{ user.integral }}</text>
			</view>
			<view class="points-description">
				<text class="description"></text>
			</view>
			<image class="star-icon" src="https://aw2025ht.kangye.xyz/api/profile/upload/aGfqal0pfXZU.png" mode="aspectFit"></image>
		</view>

		<!-- 签到区域 -->
		<view class="check-in-area">
			<view class="record-tabs">
				<text class="tab" :class="{ active: currentTab === 0 }" @click="changeTab(0)">全部积分</text>
				<text class="tab" :class="{ active: currentTab === 1 }" @click="changeTab(1)">新增积分</text>
				<text class="tab" :class="{ active: currentTab === 2 }" @click="changeTab(2)">兑换商品</text>
			</view>
		</view>

		<!-- 积分记录区域 -->
		<view class="points-record-area">
			<view class="record-list">
				<view class="record-item" v-for="(item, index) in filteredRecords" :key="index">
					<view class="item-left">
						<text class="item-title">{{ getItemTitle(item.reason) }}</text>
						<text class="item-time">时间：{{ item.createTime }}</text>
					</view>
					<text class="item-points"
						:class="item.integralChange > 0 ? 'positive' : 'negative'">{{ item.integralChange > 0 ? '+' : '-' }}{{ Math.abs(item.integralChange) }}积分</text>
				</view>
				<view v-if="filteredRecords == null || filteredRecords == '' || filteredRecords.length==0" style="
				margin: 11px;    
				font-size: 14px;
    color: #333;
	">什么都没有</view>
			</view>
		</view>
	</view>
</template>

<style scoped>
	.star-icon {
		position: relative;
		bottom: 158rpx;
		left: 35%;
		height: 402rpx;
	}

	.container {
		background-color: #f5f5f5;
		padding: 0;
		overflow: hidden;
	}

	/* 积分区域样式 */
	.points-area {
		background: linear-gradient(to bottom, #f36d00, #ffdd67);
		border-radius: 0 0 50% 50% / 0 0 10% 10%;
		height: 346rpx;
		padding: 5rpx 40rpx;
		position: relative;
		overflow: hidden;
	}

	.points-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.points-title {
		font-size: 36rpx;
		font-weight: bold;
		color: white;
	}

	.points-actions {
		display: flex;
	}

	.action-btn {
		margin-left: 20rpx;
		color: white;
		font-size: 24rpx;
	}

	.points-number {
		margin-bottom: 20rpx;
	}

	.number {
		font-size: 80rpx;
		font-weight: bold;
		color: white;
	}

	/* 签到区域样式 */
	.check-in-area {
		background-color: white;
		border-radius: 20rpx;
		padding: 28rpx;
		margin: -120rpx 32rpx 0;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
		position: relative;
		z-index: 10;
	}

	.record-tabs {
		display: flex;
		justify-content: space-around;
		margin: 13rpx;
	}

	.tab {
		font-size: 30rpx;
		color: #666;
		padding-bottom: 10rpx;
	}

	.tab.active {
		color: #f36d00;
		position: relative;
	}

	.tab.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 40rpx;
		height: 4rpx;
		background-color: #f36d00;
		border-radius: 2rpx;
	}

	/* 积分记录区域样式 */
	.points-record-area {
		background-color: white;
		border-radius: 20rpx;
		padding: 20rpx;
		margin: 30rpx 32rpx;
		box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.05);
	}

	.record-list {
		/* 空白区域样式 */
	}

	.record-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.item-left {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.item-title {
		font-size: 30rpx;
		color: #333;
		margin-bottom: 10rpx;
	}

	.item-time {
		font-size: 24rpx;
		color: #999;
	}

	.item-points {
		font-size: 30rpx;
		font-weight: bold;
	}

	.positive {
		color: #ff9800;
	}

	.negative {
		color: #16c290;
	}
</style>

<script setup>
	import {
		passenger
	} from '@/api/index.js'
	import {
		ref,
		reactive,
		onMounted,
		computed
	} from 'vue';
	const zuoshou = uni.getStorageSync("isQianDao") == null || uni.getStorageSync("isQianDao") == '' ? "签到" : uni
		.getStorageSync("isQianDao");
	const isQianDao = ref(zuoshou);


	const zuoshou1 = uni.getStorageSync("qianDaoDay") == null || uni.getStorageSync("qianDaoDay") == '' ? "0" : uni
		.getStorageSync("qianDaoDay");
	const qianDaoDay = ref(zuoshou1);


	const zuoshou2 = uni.getStorageSync("qianDaoJiFen") == null || uni.getStorageSync("qianDaoJiFen") == '' ? "0" : uni
		.getStorageSync("qianDaoJiFen");
	const qianDaoJiFen = ref(zuoshou2);

	const user = reactive({
		integral: Number(zuoshou2),
		todayIntegral: Number(zuoshou1),
		signDays: Number(zuoshou1)
	});

	// 当前选中的标签页
	const currentTab = ref(0);

	// 改变标签页
	const changeTab = (tabIndex) => {
		currentTab.value = tabIndex;
	};

	// 积分记录数据
	let pointsRecords = reactive([{
			reason: 2,
			createTime: '2025-03-10 17:44',
			integralChange: 20
		},
		{
			reason: 3,
			createTime: '2025-03-10 17:44',
			integralChange: 10
		},
		{
			reason: 2,
			createTime: '2025-03-10 17:44',
			integralChange: 20
		},
		{
			reason: 2,
			createTime: '2025-03-10 17:44',
			integralChange: 20
		},
		{
			reason: 4,
			createTime: '2025-03-10 17:44',
			integralChange: -199
		},
		{
			reason: 3,
			createTime: '2025-03-10 17:44',
			integralChange: 10
		}
	]);

	// 根据状态获取标题
	const getItemTitle = (reason) => {
		switch (reason) {
			case "1":
				return '注册';
			case "2":
				return '积分签到';
			case "3":
				return '分享好友';
			case "4":
				return '兑换商品';
			default:
				return '';
		}
	};

	// 筛选后的记录
	const filteredRecords = computed(() => {
		let result;
		if (currentTab.value === 0) {
			result = pointsRecords;
		} else if (currentTab.value === 1) {
			result = pointsRecords.filter(record => ["1", "2", "3"].includes(record.reason));
		} else if (currentTab.value === 2) {
			result = pointsRecords.filter(record => record.reason === "4");
		} else {
			result = pointsRecords;
		}

		// 按时间倒序排序
		return result.sort((a, b) => {
			// 假设你的记录中有一个时间字段，比如 createTime
			return new Date(b.createTime) - new Date(a.createTime);
		});
	});

	onMounted(async () => {
		qianDaoJiFen.value = uni.getStorageSync("qianDaoJiFen");
		isQianDao.value = uni.getStorageSync("isQianDao");
		qianDaoDay.value = uni.getStorageSync("qianDaoDay");


		// 从数据库查询之后替换掉积分数组

		// 挂载事件
		let data = await passenger.selectAllJiFenJiLuById();
		if (data != null && data.data != null) {
			pointsRecords.splice(0, pointsRecords.length, ...data.data); // 清空并填充
		}




	});
</script>